<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr/>
        <!-- 双向绑定数据 -->
        <textarea placeholder="请输入要评论的内容(最多不可超过120字)" maxlength="120" v-model="content"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
            <div class="cmt-list">
                <div class="cmt-item" v-for="(item,i) in list" :key="i">

                    <div class="cmt-title" >
                        第{{i+1}}楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:{{item.timeId | dataFormat}}
                    </div>
                    <div class="cmt-body" >
                        {{item.content}}
                    </div>

                    <!-- <div class="cmt-title">
                        第1楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2012-12-12 12:12:12
                    </div>
                    <div class="cmt-body">
                        锄禾日当午，汗滴禾下土，谁知盘中餐，日日皆辛苦。
                    </div> -->

                    <!-- api 渲染 -->
                    <!-- <div class="cmt-title" v-for="(item,i) in comments" :key="item.add_time"> -->
                        <!-- 第{{ i + 1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time | dateFormat }} -->
                    <!-- </div> -->
                    <!-- 评论内容 -->
                    <!-- <div class="cmt-body">{{ item.content === 'undefined' ? '此用户很懒，什么的都说' : item.content }}</div> -->

                    <!-- <div class="cmt-title">
                        第2楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2012-12-12 12:12:12
                    </div>
                    <div class="cmt-body">
                        锄禾日当午，汗滴禾下土，谁知盘中餐，日日皆辛苦。
                    </div>
                    <div class="cmt-title">
                        第3楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2012-12-12 12:12:12
                    </div>
                    <div class="cmt-body">
                        锄禾日当午，汗滴禾下土，谁知盘中餐，日日皆辛苦。
                    </div> -->
                </div>
            </div>
        <mt-button type="danger" size="large" plain class="margin">加载更多</mt-button>
        <!-- api 实现加载更多，下一页 -->
        <!-- <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button> -->
    </div>
</template>

<script>
// 按需导入 Toast 消息组件
import { Toast } from "mint-ui";
// import NewsInfo from "../news/NewsInfo.vue";
export default {
  data() {
    return {
      //   pageIndex: 1, // 默认展示第一页数据
      //   comments: [], // 所有的评论数据
      // msg: "", //评论输入的内容
      content: "",
      list: [],
      ctime: new Date()
    };
  },
  created() {
    // this.getComments();
    this.loadComments();
  },
  methods: {
    // getComments() {
    //   // 获取评论
    //   this.$http
    //     .get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex)
    //     .then(result => {
    //       if (result.body.status === 0) {
    //         // this.comments = result.body.message;
    //         // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
    //         this.comments = this.comments.concat(result.body.message);
    //       } else {
    //         Toast("获取评论失败");
    //       }
    //     });
    // },
    // getMore() {
    //   // 加载更多
    //   this.pageIndex++;
    //   this.getComments();
    // },
    postComment() {
      // 校验评论内容是否为空
      if (this.content.trim().length === 0) {
        return Toast("评论内容不能为空!");
      }

      // 发表评论
      // $route.params 的参数
      // 参数1: 请求的 url 地址
      // 参数2: 提交给服务器的数据对象 { content: this.msg }
      // 参数3: 定义提交时候，表单中数据的格式 { emulateJSON }
      // this.$http
      //   .post("api/postcomment/" + this.$route.params.id, {
      //     content: this.msg.trim()
      //   })
      //   .then(function(result) {
      //     if (result.body.status === 0) {
      //       // 成功了
      //       // 1. 拼接出一个评论对象
      //       var cmt = {
      //         user_name: "匿名用户",
      //         add_time: Date.now(),
      //         content: this.msg.trim()
      //       };
      //       this.comments.unshift(cmt);
      //       this.msg = "";
      //     } else {
      //       // 失败了
      //       Toast("获取评论失败!");
      //     }
      //   });
      // 把数据缓存在本地
      var comment = { timeId: Date.now(), content: this.content };
      // 从 localStorage 中 获取所有的评论
      var list = JSON.parse(localStorage.getItem("cmts") || "[]");
      // 把评论追加到列表
      list.unshift(comment);
      // 重新保存最新的 评论数据
      localStorage.setItem("cmts", JSON.stringify(list));
      this.content = "";
      this.loadComments();
    },
    loadComments() {
      // 从本地的 localStorage 中，加载评论列表
      var list = JSON.parse(localStorage.getItem("cmts") || "[]");
      this.list = list;
    }
  }
  //   props: ["id"]
};
</script>

<style lang="scss" scoped>
.cmt-container {
  h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    height: 85px;
    margin: 0;
  }
  .cmt-list {
    margin: 5px 0;
    .cmt-item {
      font-size: 13px;
      .cmt-title {
        background-color: #ccc;
        line-height: 30px;
      }
      .cmt-body {
        line-height: 35px;
        text-indent: 2em;
      }
    }
  }
}
.margin {
  margin-bottom: 5px;
}
</style>


